/**
* 图表界面
*/ 
<template>
  <!-- 组件主盒子 -->
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">生产看板</el-breadcrumb-item>
      <el-breadcrumb-item>图表分析</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 统计图 -->
    <el-row :gutter="23">
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="SaleEchart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="MoneySumEchart"></div>
        </div>
      </el-col>
      <el-col :span="8" class="text-c">
        <div class="st-gbox">
          <div class="cavasbox" ref="GoodsSumEchart"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 统计图 -->
    <div>
      <el-row :gutter="23">
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="OrderStatusEchart"></div>
          </div>
        </el-col>
        <el-col :span="12" class="text-c">
          <div class="paybox">
            <div class="cavasbox" ref="GoodsTypeEchart"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import Chart from 'echarts'
export default {
  data() {
    return {
      //  销售总笔数 
      SaleOption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '销售总笔数',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 14,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 12,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 11,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '销售总笔数',
          type: 'bar',
          barGap: 0,
          data: [],
          barWidth: 14,
          itemStyle: {
            color: "#9adcfa"
          }
        }]
      },
      //  销售总金额 
      MoneySumOption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '销售总金额',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 14,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 12,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 11,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '销售总金额',
          //   type: 'bar',
          type: 'line',
          barGap: 0,
          data: [],
          barWidth: 14,
          itemStyle: {
            color: "#9adcfa"
          }
        }]
      },
      //  销售总商品数
      GoodsSumOption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '销售总商品数',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 14,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 12,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 11,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '销售总商品数',
          type: 'bar',
          barGap: 0,
          data: [],
          barWidth: 14,
          itemStyle: {
            color: "#9adcfa"
          }
        }]
      },
      //  订单状态统计
      OrderStatusOption: {
        backgroundColor: '#9adcfa',
        title: {
          text: '订单状态统计(近一年)',
          left: 10,
          top: 5,
          textStyle: {
            fontSize: 14,
            color: '#323232'
          }
        },

        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
          show: false,
          min: 0,
          max: 5,
          inRange: {
            colorLightness: [0, 0.5]
          },
          color: ['#e6ed9c','#3c8c40']
        },
        series: [
          {
            name: '订单状态统计',
            type: 'pie',
            radius: '75%',
            center: ['50%', '50%'],
            data: [],
            roseType: 'radius',
            label: {
              normal: {
                textStyle: {
                  color: '#7f7f7f'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#7f7f7f'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
            itemStyle: {
              normal: {
                // color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      },
      // 销售商品类型统计
      GoodsTypeOption: {
        backgroundColor: '#9adcfa',
        title: {
          text: '销售商品类型统计(近一年)',
          left: 10,
          top: 5,
          textStyle: {
            fontSize: 14,
            color: '#323232'
          }
        },

        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        visualMap: {
          show: false,
          min: 10,
          max: 100,
          inRange: {
            colorLightness: [0, 0.5]
          },
          color: ['#e6ed9c','#3c8c40']
        },
        series: [
          {
            name: '销售商品类型统计',
            type: 'pie',
            radius: '75%',
            center: ['50%', '50%'],
            data: [],
            roseType: 'radius',
            label: {
              normal: {
                textStyle: {
                  color: '#7f7f7f'
                }
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#7f7f7f'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              }
            },
            itemStyle: {
              normal: {
                // color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      },
    }
  },
  // 挂载结束状态
  mounted() {
    this.getSUM()
    this.getOrderStatus()
    this.getGoodsType()
  },
  // 里面的函数只有调用才会执行
  methods: {
    // 销售总笔数、总金额、总商品数
    getSUM() {
      //获取分月销售数据
      this.$axios.get("/api/saleCount/month")
      .then((res) => {
          if (res.data.code == 200) {
            for(let key in res.data.data){
              this.SaleOption.xAxis.data.push(key.substring(4));
              this.SaleOption.series[0].data.push(res.data.data[key].orders);
              this.MoneySumOption.xAxis.data.push(key.substring(4));
              this.MoneySumOption.series[0].data.push(res.data.data[key].money);
              this.GoodsSumOption.xAxis.data.push(key.substring(4));
              this.GoodsSumOption.series[0].data.push(res.data.data[key].goods);
            }
            //渲染
            this.SaleEchart = Chart.init(this.$refs.SaleEchart)
            this.SaleEchart.setOption(this.SaleOption)
            this.MoneySumEchart = Chart.init(this.$refs.MoneySumEchart)
            this.MoneySumEchart.setOption(this.MoneySumOption)
            this.GoodsSumEchart = Chart.init(this.$refs.GoodsSumEchart)
            this.GoodsSumEchart.setOption(this.GoodsSumOption)
          }else{
              this.$message({type: 'info',message: res.data.message})
          }
      })
      .catch(err => {
          this.$message.error('数据加载失败，请稍后再试！')
      })
      
    },
    // 订单状态统计
    getOrderStatus() {
      //获取订单状态数据
      this.$axios.get("/api/saleCount/order_status")
      .then((res) => {
          if (res.data.code == 200) {
            for(let key in res.data.data){
              switch (res.data.data[key].name) {
                  case "0":
                    res.data.data[key].name="未下发";
                    break;
                  case "1":
                    res.data.data[key].name="未发货";
                    break;
                  case "2":
                    res.data.data[key].name="未支付";
                    break;
                  case "3":
                    res.data.data[key].name="已完成";
                    break;
              }
            }
            this.OrderStatusOption.series[0].data = res.data.data;
             //渲染
            let OrderStatusEchart = Chart.init(this.$refs.OrderStatusEchart);
            OrderStatusEchart.setOption(this.OrderStatusOption)
          }else{
              this.$message({type: 'info',message: res.data.message})
          }
      })
      .catch(err => {
          this.$message.error('数据加载失败，请稍后再试！')
      })
    },
    // 销售商品类型统计
    getGoodsType() {
      
      //获取产品类型数据
      this.$axios.get("/api/saleCount/product_type")
      .then((res) => {
          if (res.data.code == 200) {
            this.GoodsTypeOption.series[0].data = res.data.data;
            //渲染
            let GoodsTypeEchart = Chart.init(this.$refs.GoodsTypeEchart);
            GoodsTypeEchart.setOption(this.GoodsTypeOption);
          }else{
              this.$message({type: 'info',message: res.data.message})
          }
      })
      .catch(err => {
          this.$message.error('数据加载失败，请稍后再试！')
      });
    }
  }
};
</script>
<style>
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}
.stsearch {
  text-align: center;
}
.text-c {
  text-align: center;
}
.st-gbox {
  background-color: #fff;
  margin-top: 20px;
  border-radius: 5px;
  height: 30vh;
  box-sizing: border-box;
  padding: 10px;
}
.cavasbox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.paybox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  margin-top: 20px;
  height: 32vh;
}
</style>